<template>
	<view class="uni-rate">
		<view class="uni-rate-icon" v-for="(star,index) in stars" :key="index" :style="{marginLeft:margin+'px'}" @click="onClick(index)">
			<view class="myIcon icon-xingxing1" :style="{ color: color, 'font-size': size + 'px' }"></view>
			<view class="uni-rate-icon-on" :style="{width:star.activeWitch}">
				<view class="myIcon icon-xingxing1" :style="{ color: activeColor, 'font-size': size + 'px' }"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "uni-rate",
		props: {
			isFill: { //星星的类型，是否镂空
				type: [Boolean, String],
				default: true
			},
			color: { //星星的颜色
				type: String,
				default: '#ececec'
			},
			activeColor: { //星星选中状态颜色
				type: String,
				default: '#ffca3e'
			},
			size: { //星星的大小
				type: [Number, String],
				default: 24
			},
			value: { //当前评分
				type: [Number, String],
				default: 5
			},
			max: { //最大评分
				type: [Number, String],
				default: 5
			},
			margin: { //星星的间距
				type: [Number, String],
				default: 0
			},
			disabled: { //是否可点击
				type: [Boolean, String],
				default: false
			}
		},
		data() {
			console.log('data')
			return {
				maxSync: this.max,
				valueSync: this.value
			}
		},
		computed: {
			stars() {
				const max = Number(this.maxSync) ? Number(this.maxSync) : 5
				const value = Number(this.valueSync) ? Number(this.valueSync) : 0 ;
				const starList = []
				const floorValue = Math.floor(value)
				const ceilValue = Math.ceil(value)
				for (let i = 0; i < max; i++) {
					if (floorValue > i) {
						starList.push({
							activeWitch: '100%'
						})
					} else if (ceilValue - 1 === i) {
						starList.push({
							activeWitch: (value - floorValue) * 100 + '%'
						})
					} else {
						starList.push({
							activeWitch: '0'
						})
					}
				}
				return starList
			}
		},
		methods: {
			onClick(index) {
				if (this.disabled === true || this.disabled === 'true') {
					return
				}
				this.valueSync = index + 1
				this.$emit('change', {
					value: this.valueSync
				})
			}
		}
	}
</script>

<style lang="scss">
	.uni-rate {
		.uni-rate-icon {
			position: relative;
			display: inline-block;
		}
		.uni-rate-icon-on {
			position: absolute;
			top: 0;
			left: 0;
			overflow: hidden;
		}
	}
	
	@font-face {font-family: "myicon";
	  src: url('//at.alicdn.com/t/font_1275543_gap7xg0bxg7.eot?t=1562201069923'); /* IE9 */
	  src: url('//at.alicdn.com/t/font_1275543_gap7xg0bxg7.eot?t=1562201069923#iefix') format('embedded-opentype'), /* IE6-IE8 */
	  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALQAAsAAAAABnwAAAKEAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBBIENATYCJAMICwYABCAFhG0HMxu2BciemjwJFBjQ1jpzLSC0ABAP3+/3v7XPPV81iWgzi6aQSUwnvtcgQct4ZgjFsniId//XNCXWdXm+LKuIptAf5P8DzKVDTc+TkVNqQm7CdeJcG1ilj/J8OhpW/zdVWTRQ6UL4E23/zfRVS+/gcvr/FVAg84BymWPymICBpQGNtSmyQgm8YeyCF3icQKMBPbmDzcU1VGX2uEA8drUB1YJbllmsXqhtWJrFCzXq07P0Ec+j78dvK1ElqSnYBaeP1jbMvlWdhKJSVjwMEB4CWl2DAnNAJi4bw8cKghELGsNFI+BYucG3alkGWnFUlWB/nZ3dDPog+5k4HvdRsxPISfs4sDKpG2kMfP4qiJrlX3POMCP5yC5X3HQ+rnlO2uZnWd4Jz/4G09TV/3Xp0cEv/z5d3Q8Z6a94LM6c9+/7BYjbH1fzqnKlwfErJ0Cf909v14EZQPmy+FocQQ7Bh83ffzsbVX1TBp/2g3PkLF9mw6ygfteW4BdxBtZlg2drUtY4jdZkfNLYhEaNKGF7p/+p8p77iYd6PXdlrdOfQaHeGJoJc1CjyRrUqrcNjWZtVzfpwgoiN2DGC4DQ7geSVu+g0O4XzYQ/qNHrDLXaowCNrqNryyYT4db3mQwhG2sL7NbjSLk6qce5l6RPgcF5XkS6Jc5cHyqiXI5tKSJeYsZoqifjscLWMA5RA6dREMTYH8YeWTLojCWZSlKr6U2Dei+Eun2MGASxIdMj5LLEIipoLeqVz18i2knAwB1FdfpbhGXcztHYwGgAuhVHg4oe5ZXMHW1CCAUpLBZCGzCIBAIxlDQP8hCLGHAmBBNTQ6eZGioebC8NfyCLlWErUjiphYYnbqQ90xgA') format('woff2'),
	  url('//at.alicdn.com/t/font_1275543_gap7xg0bxg7.woff?t=1562201069923') format('woff'),
	  url('//at.alicdn.com/t/font_1275543_gap7xg0bxg7.ttf?t=1562201069923') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
	  url('//at.alicdn.com/t/font_1275543_gap7xg0bxg7.svg?t=1562201069923#iconfont') format('svg'); /* iOS 4.1- */
	}
	
	.myIcon {
	  font-family: "myicon" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.icon-xingxing1:before {
	  content: "\e681";
	  color: inherit;
	}
	
</style>
